<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>店铺注册</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link rel="stylesheet" href="/static/css/weui.css"/>
        <link rel="stylesheet" href="/static/css/weuix.css"/>
        <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
        <script src="/static/js/zepto.min.js"></script>
        <script src="/static/js/lrz.min.js"></script>
        <script src="/static/js/php.js"></script>
        <script src="/static/js/zepto.weui.js"></script>
        <script src="/static/layui/layui.js"></script>
        <script src="/static/js/picker.city.js"></script>
        <script src="/static/js/baseJs/base.js"></script>
    </head>
    <body ontouchstart>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>入驻商家信息完善</legend>
        </fieldset>
        <form>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label"
                                                      style="font-weight: 400;color: orange">店铺名称</label></div>
                    <div class="weui-cell__bd">
                        <input name="shopName" class="weui-input" placeholder="请输入店铺名称5-10位"
                               pattern="^[\u4E00-\u9FA5A-Za-z0-9]{5,10}$" type="text" title="店铺只能为5-10位">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label for="orderType" class="weui-label"
                                                      style="font-weight: 400;color: orange">店铺类别</label></div>
                    <div class="weui-cell__bd">
                        <input name="orderType" class="weui-input" id="orderType" type="text" value="">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd" style=" padding-right: 25px; "><label class="weui-label"
                                                                                     style="font-weight: 400;color: orange">店铺经营区域</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" id="shopArea" type="text" value="">
                    </div>
                </div>
                <!--根据是否有身份证信息确定 是否生成-->
                <div id="identity">

                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea id="shopDesc" class="weui-textarea" placeholder="商品简介" rows="3"
                                  onkeyup="textarea(this);"></textarea>
                        <div class="weui-textarea-counter"><span>0</span>/<i>10</i></div>
                    </div>
                    <i class="weui-icon-clear" onclick="cleararea(this)"></i>
                </div>
            </div>
            <button style="margin-left: 35%;margin-top: 50px" type="button"
                    class="layui-btn layui-btn-primary layui-border-orange layui-btn-radius" id="sub">提交申请
            </button>
        </form>
        <script>
            //判断变量
            var textareaFlog; //判断文字是否超出指定数字
            //判断文字是否超出数量
            function textarea(input) {
                var content = $(input);
                var max = content.next().find('i').text();
                var value = content.val();
                if (value.length > 0) {
                    value = value.replace(/\n|\r/gi, "");
                    var len = value.length;
                    content.next().find('span').text(len);
                    if (len > max) {
                        content.next().addClass('f-red');
                        textareaFlog = false;
                    } else {
                        content.next().removeClass('f-red');
                        textareaFlog = true;
                    }
                }
            }

            function cleartext(obj) {
                $(obj).prev().find('.weui-input').val("");
                return false;
            }

            function cleararea(obj) {
                $(obj).prev().find('.weui-textarea').val("").next().find("span").text(0);
                return false;
            }

            $(function () {
                var item = JSON.parse(localStorage.getItem('userLogin'));
                var shoptype = [];

                //初始化加载
                function judge(res) {
                    //有token
                    //获取所有店铺类型
                    ajaxBase('/shopType/kindAll', 'post', '', '', function (res) {
                        for (j in res) {
                            shoptype.push(res[j].shopTypeName);
                        }

                        if (item.userInfo.infoCard == null) {
                            $('#identity').addClass('weui-cell');
                            $('#identity').html(
                                ' <div class="weui-cell__hd">' +
                                '<label class="weui-label" style="font-weight: 400;color: orange">身份证信息完善</label>' +
                                '</div>' +
                                '<div class="weui-cell__bd">' +
                                '     <input class="weui-input" placeholder="请输入身份证信息"' +
                                '         pattern="(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)" type="text" title="身份证信息错误格式">' +
                                ' </div>'
                            )
                        }
                    })

                }

                //初始化
                initToken(judge, '/myPage/login')


                //获取选择的类别
                var shopTypeClose;
                $("#orderType").picker({
                    title: "请选择您的店铺类型",
                    cols: [
                        {
                            textAlign: 'center',
                            values: shoptype
                        }
                    ],
                    onChange: function (p, v, dv) {//滑动触发事件
                        //赋值
                        shopTypeClose = dv[0];
                        console.log(p, v, dv);
                    },
                    onClose: function (p, v, d) {
                        //确定出发事件
                        console.log("close");
                    }
                });
                //定义 赋值获取最后一个滑到的城市
                var pickerInfo = '';
                $("#shopArea").cityPicker({
                    title: "选择店铺经营区域",
                    onChange: function (picker, values, displayValues) {

                        console.log(values, displayValues);
                    },
                    onClose: function (picker, values, displayValues) {
                        //进行赋值
                        for (let i in picker.displayValue) {
                            pickerInfo += picker.displayValue[i] + ',';
                        }
                        console.log(pickerInfo)

                    }
                });
                //点击提交
                $('#sub').click(function () {
                    //店铺名称
                    var $shopName = $('[name="shopName"]');
                    //店铺介绍
                    var $shopDesc = $('#shopDesc');
                    console.log($shopName.val());
                    console.log($shopDesc.val());
                    var $shopType = $('[name="orderType"]');
                    console.log($shopName.val());
                    console.log($shopDesc.val());
                    console.log($shopType.val())
                    //满足条件进行注册添加
                    if (shopTypeClose != null && textareaFlog === true && pickerInfo !== '') {
                        ajaxBase('/shop/registerShop', 'post', {
                            areaName: pickerInfo.substr(0, pickerInfo.length - 1),//区域信息
                            logId: item.logId,//登录id
                            shopTypeName: shopTypeClose,//店铺ID
                            shopName: $shopName.val(),//店铺名称
                            shopDesc: $shopDesc.val()//店铺介绍
                        }, 'json', function (res) {
                            if (res.code == 200) {
                                localStorage.setItem("userLogin", JSON.stringify(res.data.userLogin));
                                $.toast();
                                location = '/myPage/info';
                            } else {
                                $.toast("操作失败", "cancel");
                            }
                        })
                    }
                })

            })
        </script>
    </body>
</html>